<template>
  <div class="ModuleEntry">
    <div class="module"
         @click="routerPush(module.router)"
         :style="{ width: module.size+'px', height: module.size+'px',background: background,
         'border-radius': module.radius+'px', 'box-shadow': boxShadow}">
      <i class="iconfont" :class="module.icon" :style="{ 'font-size': iconSize+'px' }"></i>
    </div>
    <p class="mt-8 fs-12">{{module.name}}</p>
  </div>
</template>

<script>
export default {
  name: 'ModuleEntry',
  props: {
    module: {
      type: Object,
      default () {
        return {
          name: '', // 模块名
          router: '', // 路由跳转地址
          size: '', // 模块宽高
          radius: '', // 模块圆角
          icon: '', // icon的class名
          background: { // 渐变背景
            direction: '', // 角度
            colorStart: '', // 颜色1
            colorEnd: '' // 颜色2
          },
          boxShadow: '' // 阴影
        }
      }
    }
  },
  data () {
    return {

    }
  },
  computed: {
    background () {
      return `${'linear-gradient(' + this.module.background.direction + 'deg,' + this.module.background.colorStart + ',' + this.module.background.colorEnd + ')'}`
    },
    iconSize () {
      return `${this.module.size / 2}`
    },
    boxShadow () {
      return `0 3px 7px 0 ${this.module.boxShadow}`
    }
  },
  methods: {
    routerPush (router) {
      this.$router.push(router)
    }
  },
  created () {

  },
  mounted () {

  }
}
</script>

<style scoped lang="scss">
  .ModuleEntry {
    display: inline-block;

    .module {
      cursor: pointer;
      width: 50px;
      height: 50px;
      margin: 0 auto;
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;

      i {
        font-size: 24px;
        color: #fff;
      }
    }

    p {
      font-size: 14px;
      text-align: center;
    }
  }
</style>
